<script>
import { defineComponent } from "vue";
import { HomeFilled, Avatar, PictureFilled, Lock, Histogram, Service } from "@element-plus/icons-vue";
export default defineComponent({
    data() {
        return {};
    },
    props: ["isshow"],
    components: {
        HomeFilled,
        Avatar,
        PictureFilled,
        Lock,
        Histogram,
        Service

    },
});
</script>

<template>
    <div>
        <el-menu class="el-menu-vertical-demo" :collapse="!isshow" :collapse-transition="true" :router="true" />
        <el-menu class="el-menu-vertical-demo" :collapse="!isshow" :collapse-transition="false" :router="true">
            <el-menu-item index="/shouye">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="/user">
                <template #title>
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>用户列表管理</span>
                </template>
                <el-menu-item index="/user/managerlist">管理员列表</el-menu-item>
                <!-- <el-menu-item index="/user/userlist">用户列表</el-menu-item> -->
            </el-sub-menu>

            <el-sub-menu index="/pro">
                <template #title>
                    <el-icon>
                        <Lock />
                    </el-icon>
                    <span>商品列表管理</span>
                </template>
                <el-menu-item index="/pro/prolist">商品列表</el-menu-item>
                <el-menu-item index="/pro/addpro">添加商品</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/sales">
                <template #title>
                    <el-icon>
                        <Histogram />
                    </el-icon>
                    <span>商品销量</span>
                </template>
                <el-menu-item index="/sales/line">折线图</el-menu-item>
                <el-menu-item index="/sales/bar">柱状图</el-menu-item>
                <el-menu-item index="/sales/pie">饼状图</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="/center">
                <template #title>
                    <el-icon>
                        <Service />


                    </el-icon>
                    <span>个人中心</span>
                </template>
                <el-menu-item index="/center/person">个人信息</el-menu-item>
            </el-sub-menu>

        </el-menu>
    </div>
</template>

<style lang="scss" scoped>
.el-menu .el-sub-menu .el-menu-item:hover {
    background-color: rgb(38, 50, 56);
}


.el-sub-menu {
    background-color: rgb(38, 50, 56);
    color: aliceblue;

    .el-icon {
        color: white;

    }
}

.el-menu-item {
    background-color: rgb(38, 50, 56);
    color: white;
}

span {
    color: white;
}
</style>

<style lang="scss">
.el-sub-menu__title:hover {

    background-color: rgb(38, 50, 56) !important;
    // color: white;

}

//子级的类名

.el-menu-item:hover {

    background-color: rgb(38, 50, 56) !important;
    // color: white;

}
</style>

